import { Checkbox } from "antd-mobile";
import { useRef, useState } from "react";
import "./index.less";
import { ArticlePopup } from "@/components/article-popup/index.jsx";
export const Agreement = ({ data, onChange }) => {
  const articlePopupRef = useRef(null);
  const [selected, setSelected] = useState(null);

  const agreement = data[selected];

  const showDetail = (index) => {
    setSelected(index);
    articlePopupRef.current.open();
  };

  return (
    <div className={"agreement"}>
      <Checkbox onChange={onChange} />
      <div className={"agreement-list"}>
        请仔细阅读
        {data.map((item, index) => (
          <span
            className={"agreement-title"}
            key={index}
            onClick={() => showDetail(index)}
          >
            《{item.title}》
          </span>
        ))}
      </div>
      <ArticlePopup ref={articlePopupRef} article={agreement} />
    </div>
  );
};
